90deg

{ Transform:rotatex (90deg) Rotatez (90deg) Translatez (98.8px) Translatey ( -89.7px); width:18.2px; height:197.6px;}. Bottom { Transform:rotatex ( -90deg) Rotatez (90deg) Translatez (161.2px) Translatey ( -89.7PX);}. Left { Transform:rotatey ( -90deg) Transl

axis.Then. We add a cube element to the package container element, 6 edges (up and down and back and forth), using figure. is due to the need to support stickers.We need to determine the coordinate position of each plane of the cube according to the thickness and width of the book. The absolute thickness of the book model (a MySQL book) used in this example is 18.2px. Height 260px. Width 197.6px.According to the simple geometrical knowledge, the distance from the center of the cube to the front

);}.top { transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px); width: 18.2px; height: 197.6px;}.bottom { transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);}.left { transform: rotateY(-90deg) translate

slit */.md-effect-13.md-modal {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}.md-effect-13 .md-content {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateZ(-3000px) rotateY(90deg);-moz-transform: translateZ(-3000px) rotateY(90deg);-ms-transform: translateZ(-3000px) rotateY(

, if you want to change the dominant color of this stripe, you even need to change it everywhere. A better way is to not specify a color for each stripe, but specify the deepest color as the background color, and overlay the translucent white stripe on the background color to obtain the light-colored stripe. background: #58a; background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0,transparent 30px); Now, you only need to modify one place t

; position:relative;}.three-d-box{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translateZ(-25px); -moz-transform:translateZ(-25px); -o-transform:translateZ(-25px); -ms-transform:translateZ(-25px); transform:translateZ(-25px); -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;}.front{ -webkit-transform:rotateX(0deg) translateZ(25px);

{ transform:rotate ( -45deg); Left:1em; top:1em; } Next, make the animation. Let the box step up, climb to the top of the slope and then re-climb: . loader::before { animation:push 3s infinite; } @keyframes Push { 0% { Transform:translatex (0); } 20%, 25% { Transform:translatex (1em); } 40%, 45% { Transform:translatex (2EM); } 60%, 65% { Transform:translatex (3em); } 80% { Transform:translatex (

#f81;} /* Left half One-fourth round */.circle1-10{width:100px;height:0px;border-radius:0 0 100px 0;-webkit-border-radius:0 0 100px 0;-moz-border-radius:0 0 100px 0;border:0px Solid red;border-bottom:100px solid #185;}7. dialog box with prompt type. hint1{width:180px;height:100px;border-radius:30px;background:purple;position:relative;}. Hint1:after{content: ""; border:0 solid transparent; border-bottom:25px Solid purple;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;border-rad

);-moz-transform:rotatex (180DEG);-ms-transform:rotatex (180DEG);-o-transform:rotatex (180DEG);-webkit-transform:translatez ( -150px);Transform:translatez ( -150px);-moz-transform:translatez ( -150px);-ms-transform:translatez ( -150px);-o-transform:translatez ( -150px);}. Cubicitem:nth-child (3) {-webkit-transform:rotatey (270deg) Translatez (150px);Transform:rotatey (270deg) Translatez (150px);-moz-transform:rotatey (270deg) Translatez (150px);-ms-transform:rotatey (270deg) Translatez (150px);-

: -1.0s; } @-webkit-keyframes Bounce { 0%, 100% {-webkit-transform:scale (0.0)} 50% {-webkit-transform:scale (1.0)} } @keyframes bounce { 0%, 100% { transform:scale (0.0); -webkit-transform:scale (0.0); } 50% { Transform:scale (1.0); -webkit-transform:scale (1.0); } Loading Animation effect Four HTML Code: CSS Code: spinner {margin:100px auto; width:32px; height:32px; position:relative; }. Cube1, cube2 {background-color: #67CF22; width:30px;

element.Browser support: Firefox 4+, Oprea + +, Safari 3.1+, Chrome 8+, IE + +CSS code: .rotate{-ms-transform:rotate(90deg); /* IE 9 */-moz-transform:rotate(90deg); /* Firefox */-webkit-transform:rotate(90deg); /* Safari and Chrome */-o-transform:rotate(90deg); /* Opera */}　　 JS Code: